<script setup>
import _ from 'lodash'
import {computed, ref, watch} from "vue";
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()

const props = defineProps({
  eleDef: {
    type: Object
  },
  currentItemElCode: String,
})

const resp = ref(null)

const gridCols = computed(() => {
  let type = resp.value?.type;
  let cols = 0;

  if (type === 'c24') {
    cols = 24;
  } else if (type === 'c5') {
    cols = 5;
  } else if (type === 'c7') {
    cols = 7;
  } else if (type === 'c9') {
    cols = 9;
  } else if (type === 'c10') {
    cols = 10;
  } else if (type === 'c12') {
    cols = 12;
  }

  return cols;
})

watch(() => modelValue.value, (newVal, oldVal) => {
  willReceiveProps(newVal);
}, {deep: true})

watch(() => resp.value, (val) => {
  modelValue.value = val;
}, {deep: true})

watch(() => props.currentItemElCode, (val) => {
  init();
})

const willReceiveProps = (newVal) => {
  if (!$utils.deepEquals(newVal, resp.value)) {
    init();
  } else {
    // console.log('一样 ... ');
  }
}

const init = async () => {
  resp.value = _.extend({}, /*DFT,*/ modelValue.value);
}

const simplifyRatio = (numerator, denominator) => {
  // 求最大公约数
  const gcd = (a, b) => {
    if (b === 0) {
      return a;
    }
    return gcd(b, a % b);
  };

  const greatestCommonDivisor = gcd(numerator, denominator);

  // 简化比例
  const simplifiedNumerator = numerator / greatestCommonDivisor;
  const simplifiedDenominator = denominator / greatestCommonDivisor;

  return `${simplifiedNumerator}/${simplifiedDenominator}`;
}

const switchVal = (prop) => {
  let val = resp.value[prop];
  let nVal = -1;
  if ((!_.isNumber(val) || val < 0)) {
    nVal = gridCols.value || 1;
  } else {
    nVal = -1;
  }

  // this.$set(this.resp, prop, nVal);
  resp.value[prop] = nVal;
}

const isSet = (prop) => {
  return _.has(resp.value, prop) && resp.value[prop] >= 0;
}

const handleSetVal = (prop, val) => {
  resp.value[prop] = val;
}
</script>

<template>
  <div class="ele-prop-item elem-design-prop-logic" v-if="resp">
    <el-form label-position="top" size="mini">
      <el-form-item label="">
        <el-radio-group
          v-model="resp.type"
          class="resp-col-num"
        >
          <el-radio-button label="c12">12</el-radio-button>
          <el-radio-button label="c24">24</el-radio-button>
          <el-radio-button label="c5">5</el-radio-button>
          <el-radio-button label="c7">7</el-radio-button>
          <el-radio-button label="c9">9</el-radio-button>
          <el-radio-button label="c10">10</el-radio-button>
          <el-radio-button label="none">无</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="resp.type !== 'none'" label="手机（mini < 768px）">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('xsc')">
              <JIcon :icon="isSet('xsc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>手机（ < 768px）</span>
            </div>
            <span v-if="resp.xsc < 0">继承/全屏</span>
            <span v-else>{{ resp.xsc }}/{{ gridCols }}</span>
            <!--<span @click="resetDft('xsc')" class="title-btn">默认值</span>-->
          </div>
        </template>
        <div class="d-grid-box">
          <template v-if="resp.type !== 'resp' && gridCols > 0">
            <div
              v-if="resp.xsc >= 1"
              class="d-grid-col"
              :class="{ 'active': resp.xsc >= i  }"
              v-tippy
              :content="simplifyRatio(i, gridCols)"
              v-for="i in gridCols"
              @click="handleSetVal('xsc', i)"
            />
          </template>
          <template v-else-if="resp.type === 'resp' && resp.xsc > 0">
            <el-button type="primary" size="small">设置样式</el-button>
          </template>
        </div>
        <!--<el-input-number v-model="resp.xsc" :min="0" :max="36"></el-input-number>-->
        <!--<el-rate v-model="resp.xsc" :max="24"
                 :icon-classes="[ 'fa fa-square-full', 'fa fa-square-full', 'fa fa-square-full' ]"
                void-icon-class="fa fa-square-full icon-rate-face-off"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>

        <el-slider v-model="resp.xsc" :step="1" :min="-1" :max="24" show-stops></el-slider>-->
      </el-form-item>
      <el-form-item v-if="resp.type != 'none'" label="平板（small > 768px）显示列数">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('smc')">
              <JIcon :icon="isSet('smc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>平板（ >= 768px）</span>
            </div>
            <span v-if="resp.smc < 0">继承/全屏</span>
            <span v-else>{{ resp.smc }}/{{ gridCols }}</span>
          </div>
        </template>
        <div class="d-grid-box">
          <div v-if="resp.smc >= 1" class="d-grid-col" :class="{ 'active': resp.smc >= i  }"
               v-tippy="{ arrow: true }" :content="simplifyRatio(i, gridCols)"
               v-for="i in gridCols" @click="handleSetVal('smc', i)"></div>
        </div>
      </el-form-item>
      <el-form-item v-if="resp.type !== 'none'" label="小屏PC（medium > 992px）显示列数">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('mdc')">
              <JIcon :icon="isSet('mdc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>PC小（ >= 992px）</span>
            </div>
            <span v-if="resp.mdc < 0">继承/全屏</span>
            <span v-else>{{ resp.mdc }}/{{ gridCols }}</span>
          </div>
        </template>
        <div class="d-grid-box">
          <div v-if="resp.mdc >= 1" class="d-grid-col" :class="{ 'active': resp.mdc >= i  }"
               v-tippy="{ arrow: true }" :content="simplifyRatio(i, gridCols)"
               v-for="i in gridCols" @click="handleSetVal('mdc', i)"></div>
        </div>
      </el-form-item>
      <el-form-item v-if="resp.type !== 'none'" label="PC（lg > 1200px）显示列数">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('lgc')">
              <JIcon :icon="isSet('lgc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>PC中（ >= 1200px）</span>
            </div>
            <span v-if="resp.lgc < 0">继承/全屏</span>
            <span v-else>{{ resp.lgc }}/{{ gridCols }}</span>
          </div>
        </template>
        <div class="d-grid-box">
          <div v-if="resp.lgc >= 1" class="d-grid-col" :class="{ 'active': resp.lgc >= i  }"
               v-tippy="{ arrow: true }" :content="simplifyRatio(i, gridCols)"
               v-for="i in gridCols" @click="handleSetVal('lgc', i)"></div>
        </div>
      </el-form-item>
      <el-form-item v-if="resp.type !== 'none'" label="大PC（xl > 1680px）显示列数">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('xlc')">
              <JIcon :icon="isSet('xlc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>PC大（ >= 1680px）</span>
            </div>
            <span v-if="resp.xlc < 0">继承/全屏</span>
            <span v-else>{{ resp.xlc }}/{{ gridCols }}</span>
          </div>
        </template>
        <div class="d-grid-box">
          <div v-if="resp.xlc >= 1" class="d-grid-col" :class="{ 'active': resp.xlc >= i  }"
               v-tippy="{ arrow: true }" :content="simplifyRatio(i, gridCols)"
               v-for="i in gridCols" @click="handleSetVal('xlc', i)"></div>
        </div>
      </el-form-item>
      <el-form-item v-if="resp.type !== 'none'" label="2K屏（xxl > 1920px）显示列数">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('xxlc')">
              <JIcon :icon="isSet('xxlc') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              <span>2K屏（ >= 1920px）</span>
            </div>
            <span v-if="resp.xxlc < 0">继承/全屏</span>
            <span v-else>{{ resp.xxlc }}/{{ gridCols }}</span>
          </div>
        </template>
        <div class="d-grid-box">
          <div v-if="resp.xxlc >= 1" class="d-grid-col" :class="{ 'active': resp.xxlc >= i  }"
               v-tippy="{ arrow: true }" :content="simplifyRatio(i, gridCols)"
               v-for="i in gridCols" @click="handleSetVal('xxlc', i)"></div>
        </div>
      </el-form-item>
    </el-form>
    <!--<template  v-if="eleDef && eleDef._node === 'grid'">
        <h5>栅格元素响应式（0代表不设置，继承小尺寸）</h5>
        <el-form label-width="160px" size="mini">
            <el-form-item label="手机（<768px）显示列数">
                <el-input-number v-model="resp.xsc" :min="0" :max="36"></el-input-number>
            </el-form-item>
            <el-form-item label="小屏（>768px）显示列数">
                <el-input-number v-model="resp.smc" :min="0" :max="36"></el-input-number>
            </el-form-item>
            <el-form-item label="平板（>992px）显示列数">
                <el-input-number v-model="resp.mdc" :min="0" :max="36"></el-input-number>
            </el-form-item>
            <el-form-item label="电脑（>1200px）显示列数">
                <el-input-number v-model="resp.lgc" :min="0" :max="36"></el-input-number>
            </el-form-item>
            <el-form-item label="大屏（>1680px）显示列数">
                <el-input-number v-model="resp.xlc" :min="0" :max="36"></el-input-number>
            </el-form-item>
            <el-form-item label="2K屏（>1920px）显示列数">
                <el-input-number v-model="resp.xxlc" :min="0" :max="36"></el-input-number>
            </el-form-item>
        </el-form>
    </template>
    <template v-else>
        <h5>响应式（不填则继承小尺寸）</h5>
        <el-form label-position="top" size="mini">&lt;!&ndash;  v-if="currentEleData && multiple" &ndash;&gt;
            <el-form-item label="手机（<768px）宽度/样式">
                <el-input v-model="resp.xsw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.xss" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
            <el-form-item label="小屏（>768px）宽度">
                <el-input v-model="resp.smw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.sms" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
            <el-form-item label="平板（>992px）宽度">
                <el-input v-model="resp.mdw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.mds" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
            <el-form-item label="电脑（>1200px）宽度">
                <el-input v-model="resp.lgw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.lgs" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
            <el-form-item label="大屏（>1680px）宽度">
                <el-input v-model="resp.xlw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.xls" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
            <el-form-item label="2K屏（>1920px）宽度">
                <el-input v-model="resp.xxlw" placeholder="宽度，带单位：px、rem、em ..."></el-input>
                <el-input v-model="resp.xxls" type="textarea" placeholder="内联样式语法"></el-input>
            </el-form-item>
        </el-form>
    </template>-->
  </div>
</template>

<style lang="scss" scoped>
.title-label {
  display: flex;
  width: 300px;
  justify-content: space-between;
  color: #666;
  margin-bottom: 5px;

  .title-switch {
    display: flex;

    align-items: center;
    cursor: pointer;

    > i {
      margin-right: 5px;
      background: #FFF;
      color: #333;
    }
  }

  .title-btn {
    cursor: pointer;
  }
}

.d-grid-box {
  display: flex;
  width: 100%;
}

.d-grid-col {
  flex: 1;
  height: 16px;
  background: #EEE;
  border-right: 1px solid #FFF;
  cursor: pointer;

  &.active {
    background: #0077aa;
  }
}
.resp-col-num {
  ::v-deep  {
    .el-radio-button__inner {
      padding: 5px 6px;
    }
  }
}
</style>
